<template>
  <view
    class="i-verification"
    :style="{ borderBottom: border, flexDirection: align, padding }"
  >
    <!-- <text class="title" v-if="title" :style="{ marginRight: right }"
      >验证码</text
    > -->
    <view class="right" :style="{ width: title ? right : '100%' }">
      <input
        @input="blur"
        type="number"
        :style="{ color: iColor }"
        v-model="code"
        :placeholder="placeholder"
      />
      <view style="flex: 1; text-align: end">
        <text v-if="time">{{ time }}s</text>
        <text v-else class="send" :style="{ color }" @click="sendVer">{{
          rightText
        }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, watch, defineExpose } from "vue";
import { getTransferSmsCode, sendSmsCodeByCaptcha,sendEmailCodeByCaptcha } from "../../api/index";
import { showTost } from "../../utils/common";
import { emailReg, phoneReg } from "../../utils/regs";
const props = defineProps({
  padding: {
    type: String,
    default: "32rpx 0",
  },
  border: {
    type: String,
    default: "1rpx solid #E6E6F0",
  },
  align: {
    type: String,
    default: "row",
  },
  right: {
    type: String,
    default: "76rpx",
  },
  color: {
    type: String,
    default: "#f3f4f5",
  },
  iColor: {
    type: String,
    default: "#16161F",
  },
  title: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: "70%",
  },
  mobile: {
    type: String,
    default: "",
  },
  kaptcha: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "",
  },
  modelValue: {
    type: [Number, String],
    default: "",
  },
  autoCode: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "请输入验证码",
  },
  rightText: {
    type: String,
    default: "获取验证码",
  },
});

const emit = defineEmits(["click", "update:modelValue"]);
const time = ref(0);
const interval = ref<any>(null);
const code = ref("");

const sendVer = async () => {
  if (props.type === "mark_present") {
    clearInterval(interval.value);

    sendCode();
    return;
  }
  if ((props.type === 'edit_code' || props.type === 'signUp' || props.type === 'signUpEmail' ) && !props.kaptcha) {
    showTost("请输入图文验证码");
    return;
  }

  if (
    !(phoneReg.test(props.mobile) || emailReg.test(props.mobile)) ||
    !props.mobile
  ) {
    showTost("请输入正确账号");
    return;
  }
  clearInterval(interval.value);
  sendCode();
};
const sendCode = async () => {
  time.value = 60;
  interval.value = setInterval(() => {
    time.value--;
    if (time.value <= 0) {
      clearInterval(interval.value);
    }
  }, 1000);
  try {
    switch (props.type) {
      case "signUp":
        await sendSmsCodeByCaptcha({
          mobile: props.mobile,
          kaptcha: props.kaptcha,
          bizType: "0",
        });
        break;
      case "mark_present":
        await getTransferSmsCode();
        break;
      case "signUpEmail":
        await sendEmailCodeByCaptcha({
          email: props.mobile,
          kaptcha: props.kaptcha,
          bizType: "0",
        });
        break;
      case "edit_code":
        await sendSmsCodeByCaptcha( {
          mobile: props.mobile,
          kaptcha: props.kaptcha,
          bizType: '1'
        });
        break;
        case "edit_email":
        await sendEmailCodeByCaptcha({
          email: props.mobile,
          kaptcha: props.kaptcha,
          bizType: "1",
        });
        break;
    }
    emit("click");
    showTost("发送成功");
  } catch (err) {
    clearInterval(interval.value);
    time.value = 0;
  }
};

const blur = () => {
  emit("update:modelValue", code.value);
};

const reset = () => {
  code.value = "";
  time.value = 0;
  clearInterval(interval.value);
};

// 暴露方法供父组件调用
defineExpose({
  reset,
  sendVer
});
</script>

<style lang="scss" scoped>
.i-verification {
  @include flexR;
  font-size: 32rpx;
  box-sizing: border-box;

  .title {
    white-space: nowrap;
  }

  .right {
    @include flexRS;
    color: #a0a0ad;
  }

  .send {
    white-space: nowrap;
  }
}
</style>
